import React, { Component } from 'react'
import Footer from '../components/Footer'
import { connect } from 'react-redux';

function mapStateToProps(state) {
    return {
     ...state
    };
}

function mapDispatchToProps(dispatch) {
    return {
        addCart(item){
            dispatch({type:'ADD_CART',data:item})
        },
 
        removeCart(item){
         dispatch({type:'REMOVE_CART',data:item})
        }
    };
}

class Cart extends Component {
  
    render() {
        let {cart_list}=this.props;
        return (
            <div>
                 <h2>购物车</h2>
                 <div>
                   {cart_list.map((v,i)=>{
                       return  <div key={i}> <img src={v.image}  alt="" className="cartimg"/> {v.title}  | 数量：<span className={v.cartnum>0?'':'hidden'}><button onClick={()=>{
                        this.props.removeCart(v);
                    }}>-</button> {v.cartnum}  </span> <button onClick={()=>{
                        this.props.addCart(v);
                    }}>+</button> | 单价：{v.price}</div>
                   })}
                 </div>


<Footer {...this.props}></Footer>
            </div>
        );
    }
}

export default connect(
    mapStateToProps,mapDispatchToProps
)(Cart);